<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            background-color: #fef9f8;
        }

        /* .main_body {
            width: 987px;
            height: 742px;
        } */

        .main_box {
            width: 100%;
            height: 100%;
            /* background-image: url('https://img.ismartgo.cn/data/h5/230712/88a2ea30-affa-4570-9f3d-db56b98e259e.png');
            background-size: cover; */
            overflow: hidden;
            position: relative;
        }

        .main_box_bg {
            position: absolute;
            width: 100%;
            height: inherit;
            left: 0;
            top: 0;
            z-index: 99;
        }

        .logo {
            width: 1.5rem;
            height: 0.5rem;
            background-image: url('./img/fbb4a014-7887-439d-9124-5e44610917d1.png');
            background-size: 100% 100%;
            margin: 0.1rem;
            display: none;
        }

        .Semicircle1 {
            width: 7rem;
            height: 7rem;
            position: absolute;
            right: -2.5rem;
            bottom: -4.2rem;
            animation: Semicircle1amplify 0.5s alternate infinite;
            animation-iteration-count: 1;
            /*动画只执行一次*/
            -moz-animation-iteration-count: 1;
            -webkit-animation-iteration-count: 1;
            -o-animation-iteration-count: 1;
            animation-fill-mode: forwards;
            /*让动画停留在最后一帧 */
            -moz-animation-fill-mode: forwards;
            -webkit-animation-fill-mode: forwards;
            -o-animation-fill-mode: forwards;
            background-color: #edb5ac;
            border-radius: 50%;
            z-index: 3;
        }

        .Semicircle2 {
            width: 9rem;
            height: 9rem;
            position: absolute;
            right: -3rem;
            bottom: -4.8rem;
            animation: Semicircle2amplify 1s alternate infinite;
            animation-iteration-count: 1;
            /*动画只执行一次*/
            -moz-animation-iteration-count: 1;
            -webkit-animation-iteration-count: 1;
            -o-animation-iteration-count: 1;
            animation-fill-mode: forwards;
            /*让动画停留在最后一帧 */
            -moz-animation-fill-mode: forwards;
            -webkit-animation-fill-mode: forwards;
            -o-animation-fill-mode: forwards;
            background-color: #f6dbd8;
            border-radius: 50%;
            z-index: 2;
        }

        .Semicircle3 {
            width: 12rem;
            height: 12rem;
            position: absolute;
            right: -4.5rem;
            bottom: -6.5rem;
            animation: Semicircle3amplify 1.5s alternate infinite;
            animation-iteration-count: 1;
            /*动画只执行一次*/
            -moz-animation-iteration-count: 1;
            -webkit-animation-iteration-count: 1;
            -o-animation-iteration-count: 1;
            animation-fill-mode: forwards;
            /*让动画停留在最后一帧 */
            -moz-animation-fill-mode: forwards;
            -webkit-animation-fill-mode: forwards;
            -o-animation-fill-mode: forwards;
            background-color: #f5e3e0;
            border-radius: 50%;
            z-index: 1;
        }

        .logoAnimation {
            animation: logoMove 0.5s alternate infinite;
            animation-iteration-count: 1;
            /*动画只执行一次*/
            -moz-animation-iteration-count: 1;
            -webkit-animation-iteration-count: 1;
            -o-animation-iteration-count: 1;
            animation-fill-mode: forwards;
            /*让动画停留在最后一帧 */
            -moz-animation-fill-mode: forwards;
            -webkit-animation-fill-mode: forwards;
            -o-animation-fill-mode: forwards;
            z-index: 1;
        }


        @keyframes logoMove {
            0% {
                transform: scale(0);
            }

            100% {
                transform: scale(1);
            }
        }


        .tipAnimation {
            animation: logoMove 0.5s alternate infinite;
            animation-iteration-count: 1;
            /*动画只执行一次*/
            -moz-animation-iteration-count: 1;
            -webkit-animation-iteration-count: 1;
            -o-animation-iteration-count: 1;
            animation-fill-mode: forwards;
            /*让动画停留在最后一帧 */
            -moz-animation-fill-mode: forwards;
            -webkit-animation-fill-mode: forwards;
            -o-animation-fill-mode: forwards;
            z-index: 1;
        }


        @keyframes tipMove {
            0% {
                transform: scale(0);
            }

            75% {
                transform: scale(1.5);
            }

            100% {
                transform: scale(1);
            }
        }



        @keyframes Semicircle1amplify {
            0% {
                width: 0rem;
                height: 0rem;
            }

            100% {
                /* width: 95vw;
                height: 91vw; */
                width: 7rem;
                height: 7rem;
            }
        }

        @keyframes Semicircle2amplify {
            0% {
                width: 0rem;
                height: 0rem;
            }

            100% {
                /* width: 119vw;
                height: 114vw; */

                width: 9rem;
                height: 9rem;
            }
        }

        @keyframes Semicircle3amplify {
            0% {
                width: 0rem;
                height: 0rem;
            }

            100% {
                /* width: 159vw;
                height: 150vw; */

                width: 12rem;
                height: 12rem;
            }
        }

        .preferential1 {
            width: 1.75rem;
            height: 0.95rem;
            position: absolute;
            left: 1.95rem;
            top: 3.8rem;
            z-index: 999;

            background-image: url('https://game.img.ismartgo.cn/exchangeadmin/230720/cb193ef0-96ba-439c-8802-c9ae3673b21c.png');
            background-size: 100% 100%;
            display: none;

            /* left: 26%;
            top: 66%; */

        }

        .preferential2 {
            width: 1.75rem;
            height: 0.95rem;
            position: absolute;
            left: 3.2rem;
            top: 2.5rem;
            z-index: 999;
            background-image: url('https://game.img.ismartgo.cn/exchangeadmin/230720/cb193ef0-96ba-439c-8802-c9ae3673b21c.png');
            background-size: 100% 100%;
            display: none;
            /* left: 42%;
            top: 43%; */
        }

        .preferential3 {
            width: 1.75rem;
            height: 0.95rem;
            position: absolute;
            left: 5rem;
            top: 1.6rem;
            z-index: 999;
            background-image: url('https://game.img.ismartgo.cn/exchangeadmin/230720/cb193ef0-96ba-439c-8802-c9ae3673b21c.png');
            background-size: 100% 100%;
            display: none;

            /* left: 66%;
            top: 27%; */

        }

        .preferential4 {
            width: 1.75rem;
            height: 0.95rem;
            position: absolute;
            left: 5.7rem;
            top: 0.3rem;
            z-index: 999;
            background-image: url('https://game.img.ismartgo.cn/exchangeadmin/230720/cb193ef0-96ba-439c-8802-c9ae3673b21c.png');
            background-size: 100% 100%;
            display: none;

            /* left: 76%;
            top: 3%; */

        }

        .preferential5 {
            width: 1.75rem;
            height: 0.95rem;
            position: absolute;
            left: 3.7rem;
            top: 0.48rem;
            z-index: 999;
            background-image: url('https://game.img.ismartgo.cn/exchangeadmin/230720/cb193ef0-96ba-439c-8802-c9ae3673b21c.png');
            background-size: 100% 100%;
            display: none;

            /* left: 51%;
            top: 9%; */

        }


        .preferential6 {
            width: 1.75rem;
            height: 0.95rem;
            position: absolute;
            left: 2.1rem;
            top: 1.4rem;
            z-index: 999;
            background-image: url('https://game.img.ismartgo.cn/exchangeadmin/230720/cb193ef0-96ba-439c-8802-c9ae3673b21c.png');
            background-size: 100% 100%;
            display: none;

            /* left: 28%;
            top: 25%; */

        }

        .preferential7 {
            width: 1.75rem;
            height: 0.95rem;
            position: absolute;
            left: 0.9rem;
            top: 2.7rem;
            z-index: 999;
            background-image: url('https://game.img.ismartgo.cn/exchangeadmin/230720/cb193ef0-96ba-439c-8802-c9ae3673b21c.png');
            background-size: 100% 100%;
            display: none;
            /* left: 12%;
            top: 47%; */
        }

        .preferential8 {
            width: 1.75rem;
            height: 0.95rem;
            position: absolute;
            left: 0.2rem;
            top: 4.15rem;
            z-index: 999;
            background-image: url('https://game.img.ismartgo.cn/exchangeadmin/230720/cb193ef0-96ba-439c-8802-c9ae3673b21c.png');
            background-size: 100% 100%;
            display: none;
            /* left: 3%;
            top: 74%; */
        }


        .preferIcon {
            width: 0.31rem;
            height: 0.31rem;
            margin-top: 0.265rem;
            display: block;
            margin-left: 0.178rem;
            float: left;
            border-radius: 50%;
            background-size: contain;
        }

        .shopName {
            font-size: 0.1rem;
		    margin-left: 0.46rem;
		    margin-top: 0.19rem;
		    font-weight: 600;
		    text-align: center;
        }

        .tips_box {
            display: none;
            position: absolute;
            left: -0.2rem;
            top: 0.4rem;
        }

        .tips {
            background-image: url('./img/4f7bec86-08cc-41bf-bc1d-d553f114bfd0.png');
            background-size: 100% 100%;
            width: 3.1rem;
            height: 2.2rem;
            transform: rotate(-15deg);


        }

        .preferentialAnimation {
            animation: preferential1amplify 1.2s infinite linear;
        }

        @keyframes preferential1amplify {
            0% {
                transform: translateY(10px);
            }

            50% {
                transform: translateY(0px);
            }

            100% {
                transform: translateY(10px);
            }
        }


        .locaDialog {
            width: 100%;
            height: 100%;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, .7);
            /* padding: 2vw; */
            z-index: 999;
            box-sizing: border-box;
            overflow: hidden;
            overflow-y: scroll;
        }

        .locaDialog_box_2,
        .locaDialog_box_3 {
            width: 96%;
            height: 80%;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }


        .locaDialog_img {
            width: 100%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .closeBtn {
            width: 1rem;
            height: 0.5rem;
            position: absolute;
            left: 0.4rem;
            top: 0.6rem;
        }

        .address {
            width: 2.3rem;
            height: 2.8rem;
            position: absolute;
            left: 0.4rem;
            top: 1rem;
            background-image: url(./img/2c0d5352-a049-419e-8273-696448dd3e46.png);
            background-size: 100% 100%;
        }

        .addressIcon {
            width: 0.7rem;
            display: block;
            margin-top: 0.55rem;
            margin-left: 0.71rem;
        }

        .addressName {
            font-size: 0.15rem;
            width: 1.15rem;
            height: 0.22rem;
            /* background: pink; */
            margin-top: 0.94rem;
            margin-left: 0.5rem;
            text-align: center;
            line-height: 0.22rem;
            font-weight: 600;
            color: #ffffff;
        }

        .DiscountList {
            width: 3.5rem;
            height: 3.2rem;
            position: absolute;
            left: 3rem;
            top: 0.7rem;
            overflow: hidden;
            overflow-y: scroll;
            padding-right: .3rem;
        }

        .list {
            position: relative;
        }

        .commodityInfo {
            width: 100%;
            height: 0.8rem;
            border: 3px solid #7f7f7f;
            box-sizing: border-box;
            border-radius: 13px;
            margin: 0.25rem 0;
            display: flex;
            align-items: center;

        }

        .superValue {
            width: 0.7rem;
            height: 0.7rem;
            background-image: url(./img/4812a2af-f7e9-4339-9dfb-206b49fdbfb4.png);
            background-size: 100% 100%;
            position: absolute;
            right: -0.34rem;
            top: -0.24rem;
        }

        .commodityInfo_pic_img {
            width: 0.6rem;
            margin: 0.1rem;

        }

        .FullReduction {
            width: 2.4rem;
            height: 0.5rem;
            border-left: 2px solid;
            margin-left: 0.1rem;
            font-size: 0.25rem;
            text-align: center;
            line-height: 0.5rem;
            font-weight: bolder;
            color: #7f7f7f;
        }

        .name {
            width: 1.5rem;
            height: 0.5rem;
            position: absolute;
            left: 0.9rem;
            top: 1rem;
            font-size: 0.15rem;
            text-align: right;
            line-height: 0.5rem;
            font-weight: bolder;
        }

        .capacity {
            position: absolute;
            left: 1.35rem;
            top: 1.5rem;
            font-size: 0.15rem;
            text-align: right;
            font-weight: bolder;
            border: 2px solid #656565;
            padding: 0.04rem;
            border-radius: 1rem;
            color: #656565;
        }

        .preferentImg {
            position: absolute;
            left: 0.49rem;
            top: 1.9rem;
            font-size: 0.15rem;
            width: 2rem;
            height: 1.9rem;
        }

        /* 使用说明 */
        .UseInstructions {
            position: absolute;
            left: 3.05rem;
            top: 1.7rem;
            width: 2rem;
            height: 2.2rem;
            overflow: hidden;
            overflow-y: scroll;
            font-size: 0.12rem;
            color: #696969;
            white-space: pre-line;
        }

        .title {
            position: absolute;
            left: 2.9rem;
            top: 0.35rem;
            font-size: 0.4rem;
            text-align: right;
            font-weight: bolder;
        }

        .qrcode {
            position: absolute;
            left: 5.4rem;
            top: 2.32rem;
            width: 1rem;
            height: 1rem;
           /*  overflow: hidden;
            overflow-y: scroll; */
            font-size: 0.12rem;
            color: #696969;

        }

        .qrcode img {
            width: 100%;
        }

        /*滚动条样式*/
        .DiscountList::-webkit-scrollbar {
            width: 12px;
        }

        .DiscountList::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background: #ff8a0b;
        }

        /* ::-webkit-scrollbar-track {
            border-radius: 0;
            background: #c1c1c1;

        } */
    </style>

</head>

<body>
    <!-- <div class="main_body"> -->
    <div class="main_box">

        <img class="main_box_bg" src="./img/ce609415-bac6-4c43-bc02-82161f7be96b.png" alt="">

        <div class="logo">

        </div>
        <div class="Semicircle1"></div>
        <div class="Semicircle2"> </div>
        <div class="Semicircle3"></div>


        <div class="prefeLis">

            <div v-for="(item , index) in indexInfo" :class="'preferential' + (index+1)" @click="prefeLisCLick(item)">
               <!--  <div class="preferIcon" :style="{ backgroundImage: `url(${item.logoimg})` }">

                </div> -->

                <div class="shopName">
                    {{item.name}}
                </div>
            </div>
        </div>

        <div class="tips_box">
            <div class="tips">
            </div>
        </div>

        <!-- 弹窗 -->
        <div class="locaDialog" v-if="locaDialogFlag">
            <!-- 二级弹窗 -->
            <div class="locaDialog_box_2" v-if="seconpageFlag">
                <img class="locaDialog_img"
                    src="./img/6db60a79-efb9-47fb-8c9d-360dae28a83b.png" alt="">

                <div class="closeBtn" @click="closeLocaDialog">
                </div>

                <!-- 地点 -->
                <div class="address">
                    <img class="addressIcon" :src="preferentialList.logoimg" alt="">
                    <div class="addressName">
                        {{ preferentialList.name }}
                    </div>
                </div>
                <!-- 列表 -->
                <div class="DiscountList">
                    <div class="list" v-for=" item in preferentialList.coupons" @click="DiscountClick(item)">
                        <div class="commodityInfo">
                            <img class="commodityInfo_pic_img" :src="item.coverimg" alt="">
                            <div class="FullReduction">
                                {{item.title}}
                            </div>
                        </div>
                        <div class="superValue">
                        </div>
                    </div>
                </div>
            </div>


            <!-- 三级弹窗 -->
            <div class="locaDialog_box_3" v-if="threepageFlag">
                <img class="locaDialog_img"
                    src="./img/e6b23a14-edec-449b-8c81-8c3237724ae5.png" alt="">
                <!-- 商品名称 -->
                <div class="name">
                    {{ preferentialInfo.title }}
                </div>
                <!-- 容量 -->
               <!--  <div class="capacity">
                    {{ preferentialInfo.capacity}}
                </div> -->

                <!-- 商品图片 -->
                <div class="preferentImg">
                    <img class="" style="width: 100%;" :src="preferentialInfo.coverimg" alt="">
                </div>
                <!-- 优惠标题 -->
                <div class="title">
                    {{ preferentialInfo.subtitle}}
                </div>

                <!-- 使用说明 -->
                <div class="UseInstructions">
                    <!-- <pre>{{ preferentialInfo.illustrate}} </pre> -->
                    {{ preferentialInfo.desc}}

                </div>

                <!-- 二维码 -->

                <div class="qrcode">
                    <img class="" :src="qrcode" alt="">
                </div>

                <div class="closeBtn" @click="closethreeLocaDialog">

                </div>
            </div>

        </div>

        <!-- </div> -->

    </div>

    <script src="//img.ismartgo.com/js/vue.min.js"></script>
    <script type="text/javascript" src="//game.img.ismartgo.cn/exchangeadmin/230719/73d66e5d-458a-4016-99e5-54eb2efb8c1a.js"></script>
    <script>
        setPx()
        window.onresize = setPx;
        function setPx() {
            var W = 7.50;  //设计图尺寸， 不传默认是750；
            // 获取容器大小
            var winW = document.querySelector('.main_box').clientWidth;
            // 1rem = 131.6px
            console.log(winW / W);
            document.querySelector('html').style.fontSize = winW / W + 'px';
        }
    </script>
    <script>

        var Vm = new Vue({
            el: ".main_box",
            data() {
                return {

                    locaDialogFlag: false,
                    seconpageFlag: false,
                    threepageFlag: false,
                    addressBg: '',
                    // 首页商户信息
                    indexInfo: [ ],
                    // 二级优惠列表数据
                    preferentialList: {},
                    // 三级页面信息
                    preferentialInfo: {},
                    //二维码
                    qrcode:"",
                };
            },
            mounted() {
            		var _this=this;            			
            		_this.initView()
            		//五分钟刷新一次
            		setInterval(function(){
            			_this.initView()
            		},300000);
            },
            methods: {
            		initView(){
            			var _this=this;            			
            			$.ajaxSettings.async = true;
            			_this.showAndAnimation('.tips_box', 'logoAnimation')
            			_this.showAndAnimation('.logo', 'logoAnimation')
            			$.post("/brandbooster/api/getindexdata",{appid: getUrlParams("appid"),docno: getUrlParams("docno")},function(data){
            				console.log(data)
            				_this.indexInfo = data.result;
            				_this.handle2();
            					
            			},"json")
          				
            		},
               
                handle2() {
            			setTimeout(function(){
        					$('.preferential8').show().addClass( 'preferentialAnimation')
        				},100)
        				setTimeout(function(){
        					$('.preferential7').show().addClass( 'preferentialAnimation')
        				},200)
        				setTimeout(function(){
        					$('.preferential6').show().addClass( 'preferentialAnimation')
        				},300)
        				setTimeout(function(){
        					$('.preferential5').show().addClass( 'preferentialAnimation')
        				},400)
        				setTimeout(function(){
        					$('.preferential4').show().addClass( 'preferentialAnimation')
        				},500)
        				setTimeout(function(){
        					$('.preferential3').show().addClass( 'preferentialAnimation')
        				},600)
        				setTimeout(function(){
        					$('.preferential2').show().addClass( 'preferentialAnimation')
        				},700)
        				setTimeout(function(){
        					$('.preferential1').show().addClass( 'preferentialAnimation')
        				},800)
                },
                // 添加动画
                showAndAnimation(ele, eleAnima) {
                    $(ele).show().addClass(eleAnima)
                },
                // 关闭弹窗
                closeLocaDialog() {
                    this.locaDialogFlag = false;
                    this.seconpageFlag = false
                },
                // 优惠券点击
                DiscountClick(item) { 
                		var _this=this;
                		_this.preferentialInfo = item
                		_this.locaDialogFlag = true
                		_this.seconpageFlag = false
                		_this.threepageFlag = true
                    	var wxappid = this.preferentialList.wxappid;
                    	//获取qr码
                    	$.post("/brandbooster/api/getqrurlimg",{appid: getUrlParams("appid"),docno: getUrlParams("docno"),wxappid:wxappid},function(data){
                    		var json_obj = JSON.parse(data);
                    		_this.qrcode = json_obj.result;
                    	})
                },
                closethreeLocaDialog() {
                    this.locaDialogFlag = false;
                    this.threepageFlag = false
                },

                prefeLisCLick(item) {
                		this.preferentialList = item;
                    this.locaDialogFlag = true
                    this.seconpageFlag = true
                },

                // 接口
                // exchangeList() {
                //     var that = this
                //     $.ajax({
                //         url: "",
                //         type: "POST",
                //         data: {
                //             e_ccd: campCode,
                //         },
                //         success: function (data) {
                //             if (data.code == 0) {

                //             }
                //             if (data.code != 0) {
                //                 alert(data.msg);
                //                 return
                //             }

                //         }
                //     });
                // },



            },
        });

        function getUrlParams(key) {
	        	var url = window.location.search.substr(1);
	        	if (url == '') {
	        		return false;
	        	}
	        	var paramsArr = url.split('&');
	        	for (var i = 0; i < paramsArr.length; i++) {
	        		var combina = paramsArr[i].split("=");
	        		if (combina[0] == key) {
	        			return combina[1];
	        		}
	        	}
	        	return false;
        }
    </script>

</body>

</html>